<template>
	<view class="zero-timeline">
		<view v-if="newData.length">
			<view v-for="(item, index) in newData" :key="index" class="item"
				:style="{'--gap':gap,'--left':leftWidth,'--completedColor':item.completed?'#0396FF':'#F56C6C'}">
				<view class="left" v-if="showLeft">
					<view class="time">
						{{ item.leftTime}}
					</view>
					<view class="content">
						<view class="title">
							{{ item.leftTitle}}
						</view>
						<view class="sub">
							{{ item.leftContent }}
						</view>
					</view>
				</view>
				<view class="line">
					<view class="dot"></view>
				</view>
				<view class="right">
					<view class="time p-b-5">
						{{ item.actName}}
					</view>
					<RectangleBadge :value="stateText[item.type]" :type="item.type=='REJECT'?'error':'default'"
						size="mini" v-if="['REJECT','STOP'].includes(item.type)">
						<view class="content">
							<view v-for="(inm, inx) in [...defaultItem, ...cardItem]" :key="inx">
								<slot :name="inm.prop" :row="item" :config="inm">
									<view v-if="item?.[inm.prop]" class="p-b-4 sub"
										:style="{ color: stateColor[item?.type] }">
										<text>{{ inm.label }}：</text>
										<text> {{ item?.[inm.prop] }}</text>
									</view>
								</slot>
							</view>
						</view>
					</RectangleBadge>
					<view class="content" v-else>
						<view v-for="(inm, inx) in [...defaultItem, ...cardItem]" :key="inx">
							<slot :name="inm.prop" :row="item" :config="inm">
								<view v-if="item?.[inm.prop]" class="p-b-4 sub"
									:style="{ color: stateColor[item?.type] }">
									<text>{{ inm.label }}：</text>
									<text> {{ item?.[inm.prop] }}</text>
								</view>
							</slot>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="height: 500rpx;" class="flex-center">
			<u-empty mode="history" text="暂无流转记录"></u-empty>
		</view>
	</view>
</template>

<script setup>
	import RectangleBadge from '@/uni_modules/hope-11-rectangle-badge/components/hope-11-rectangle-badge/rectangle-badge.vue'
	// 时间线组件链接  https://ext.dcloud.net.cn/plugin?id=15246
	// 角标组件链接	 https://ext.dcloud.net.cn/plugin?id=18162
	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		},
		showLeft: {
			type: Boolean,
			default: false
		},
		leftWidth: {
			type: String,
			default: '150rpx'
		},
		gap: {
			type: String,
			default: '20rpx'
		},
		// 自定义字段
		cardItem: {
			type: Array,
			default: () => []
		},
		//无数据默认提示
		description: {
			type: String,
			default: '暂无流转记录',
		},
	})

	//默认字段
	const defaultItem = [{
			label: '开始时间',
			prop: 'startTime',
		},
		{
			label: '结束时间',
			prop: 'endTime',
		},
		{
			label: '审批人',
			prop: 'assignee',
		},
		{
			label: '备注',
			prop: 'fullMsg',
		},
	];

	const stateColor = {
		REJECT: '#F56C6C', //驳回
		STOP: '#909399', //撤回
	};
	const stateText = {
		REJECT: '已驳回',
		STOP: '已撤回',
	}

	let newObj = {};

	/**
	 *将对象中的对象递归到同一级
	 * @param {*目标对象} obj
	 */

	function deconstruction(obj) {
		for (const val in obj) {
			//判断是否是Object类型
			if (obj[val] instanceof Object) {
				deconstruction(obj[val]);
			} else {
				//去除重复字段
				if (!newObj.hasOwnProperty(`${val}`)) {
					newObj[val] = obj[val];
				}
			}
		}
		return newObj;
	}

	let newData = ref([]);

	watch(
		() => props.data,
		val => {
			newData.value = val.map(item => {
				newObj = {};
				return {
					...cloneDeep(deconstruction(cloneDeep(item))),
				};
			});
		}, {
			immediate: true
		}
	);
</script>

<style lang="scss" scoped>
	.zero-timeline {
		position: relative;
		padding: 10rpx;
		display: flex;
		flex-direction: column;

		.item {
			display: flex;
		}

		.left {
			width: var(--left);
			overflow: hidden;
			margin-bottom: var(--gap);
			text-align: right;
			white-space: pre-wrap;
			word-wrap: break-word;
			word-break: break-all;
			flex-shrink: 0;

			.time {
				font-size: 24rpx;
				color: #333333;
			}

			.content {
				.sub {
					color: #999999;
					font-size: 24rpx;
				}
			}
		}

		.line {
			margin: 2px 10px 0px 10px;
			width: 3px;
			background: #449dff;
			position: relative;
			flex-shrink: 0;
			flex-grow: 0;

			.dot {
				position: absolute;
				top: 0px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				width: 8px;
				height: 8px;
				background: var(--completedColor);
				box-shadow: 0 0 3px 1px var(--completedColor);
				border-radius: 50%;
			}
		}

		.right {
			flex: 1;
			margin-bottom: var(--gap);

			.time {
				font-size: 24rpx;
				color: #333333;
			}

			.content {
				padding: 20rpx 30rpx;
				min-height: 50rpx;
				background: #f3f4f6;
				border-radius: 10rpx;
				white-space: pre-wrap;
				word-wrap: break-word;
				word-break: break-all;

				.sub {
					color: #666666;
					font-size: 28rpx;
					padding: 5rpx 0;
				}

				.tips {
					color: #999999;
					font-size: 24rpx;
				}
			}

		}

		.item:last-child {
			.line {
				background: transparent;
			}
		}
	}
</style>